<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<style type="text/css">
    *{
        box-sizing: border-box;
    }
    html,body{
        border:0;
        padding:0;
        margin:0;
    }
    .center-bg-img{
        height: 100%;
        background-image:url(./example.png);
        background-position: 50% 50%;
        background-repeat: no-repeat;
        background-border:5px solid white;
    }
    .center-bg-img-h{
        background-size: 100% auto;
    }
    .center-bg-img-v{
        background-size: auto 100%;
    }
    .center-bg-warpper{
        width: 100%;
        height:100%;
        position: absolute;
        padding: 5px;
    }
</style>
    <div class="center-bg-warpper">
        <div class="center-bg-img center-bg-img-v">

        </div>
    </div>

</body>
</html>